<template>
  <el-row>
    <el-card class="box-card">
      <el-tooltip placement="top" style="float: right">
        <div slot="content">
          UCL:上控制限<br/>
          CL:中心限<br/>
          LCL:下控制限<br/>
          CP:过程能力指数<br/>
          CPL:下限过程能力指数<br/>
          CPU:上限过程能力指数<br/>
          CPK:修改的过程能力指数<br/>
          PP:过程性能指数<br/>
          PPu:上限过程性能指数<br/>
          PPl:下限过程性能指数<br/>
          PPk:修正的过程性能指数
        </div>
        <el-button circle>?</el-button>
      </el-tooltip>
      <el-col v-if="controlChart" :span="24">
        <spc :chartData="chart1"/>
      </el-col>
      <el-col  v-if="controlChart" :span="24">
        <spc :chartData="chart2"/>
      </el-col>
      <el-col v-if="SampleGraph" :span="24">
        <spcCartogram :chartData="arrData"></spcCartogram>
      </el-col>
      <el-col v-if="xbarChart" :span="24">
        <spcCartogram :chartData="means"></spcCartogram>
      </el-col>
      <el-col v-if="QualifiedDiagram" :span="24">
        <spcCartogram :chartData="percents"></spcCartogram>
      </el-col>
      <el-col :span="24">
        <!--<el-button @click="switchover(0)">控制图</el-button>-->
        <!--<el-button @click="switchover(1)">均值图</el-button>-->
        <!--<el-button @click="switchover(2)">合格趋势图</el-button>-->
        <!--<el-button @click="switchover(3)">样本运行图</el-button>-->
        <el-tabs  v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="控制图" name="first"/>
          <el-tab-pane label="均值图" name="second"/>
          <el-tab-pane label="合格趋势图" name="third"/>
          <el-tab-pane label="样本运行图" name="fourth"/>
        </el-tabs>
        <div style="text-align:center;margin-bottom: 10px">
          <span>cp : {{cp}}</span>
          <span>cpl : {{cpl}}</span>
          <span>cpu : {{cpu}}</span>
          <span>cpk : {{cpk}}</span>
          <span>pp : {{pp}}</span>
          <span>ppu : {{ppu}}</span>
          <span>ppl : {{ppl}}</span>
          <span>ppk : {{ppk}}</span>
        </div>
      </el-col>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 30px">
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="50">
            </el-table-column>
            <el-table-column v-for="item in header"
                             :prop="item.prop"
                             :label="item.label"
            >
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="80">
              <template slot-scope="scope">
                <!--{{scope.row.state}}-->
                <el-tag :type="scope.row.state === '失控' ? 'danger' : 'success'">
                  <!--{{1}}-->
                  {{ scope.row.state }}
                </el-tag>
              </template>

            </el-table-column>

          </el-table>
        </template>
      </el-col>
    </el-card>
  </el-row>

</template>


<script>
  import crudSpcMain from '@/api/statistical/spcMain'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import crudProductModel from '@/api/product/productModel'
  import spc from '@/components/Echarts/Spc'
  import spcCartogram from '@/components/Echarts/SpcCartogram'

  const defaultForm = {
    id: null,
    testItem: null,
    graphType: null,
    productCode: null,
    productName: null,
    capacity: null,
    teamGroup: null,
    equipmentCode: null,
    workOrderCode: null,
    specificationUpperLimit: null,
    targetValue: null,
    specificationFloor: null,
    judgeRule: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  }
  export default {
    name: 'statisticalSpcChart',
    components: {pagination, crudOperation, rrOperation, udOperation, spc,spcCartogram},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['graph_type'],
    cruds() {
      return CRUD({title: 'SPC统计图', url: 'api/spcMain', idField: 'id', sort: 'id,desc', crudMethod: {...crudSpcMain}})
    },
    data() {
      return {
        drawer: false,
        innerVisible: false,
        projecting: false,
        id: 0,
        cp: 0,
        cpl: 0,
        cpu: 0,
        cpk: 0,
        pp: 0,
        ppu: 0,
        ppl: 0,
        ppk: 0,
        tableData: [],
        header: [],
        chart1: {},
        chart2: {},
        arrData: {},
        means: {},
        percents: {},
        controlChart:true,
        xbarChart:false,
        QualifiedDiagram:false,
        SampleGraph:false,
        activeName:'first',
        permission: {
          add: ['admin', 'spcMain:add'],
          edit: ['admin', 'spcMain:edit'],
          del: ['admin', 'spcMain:del']
        },
        rules: {},
        queryTypeOptions: [
          {key: 'testItem', display_name: '检测项目'},
          {key: 'graphType', display_name: '图类'},
          {key: 'productCode', display_name: '产品型号'}
        ],
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeSubmit]() {
        return true
      },
      //返回数组
      returnArr(data) {
        let arr = []
        if (data) {
          for (var i = 0;i<data.length;i++){
            arr.push((i+1));
          }
        }
        return arr;
      },
      handleClick(tab, event) {
        switch (this.activeName) {
          case "first":
            this.controlChart= true;
            this.xbarChart = false;
            this.QualifiedDiagram = false;
            this.SampleGraph = false
            break
          case "second":
            this.controlChart= false;
            this.xbarChart = true;
            this.QualifiedDiagram = false;
            this.SampleGraph = false
            break
          case "third":
            this.controlChart= false;
            this.xbarChart = false;
            this.QualifiedDiagram = true;
            this.SampleGraph = false
            break
          case "fourth":
            this.controlChart= false;
            this.xbarChart = false;
            this.QualifiedDiagram = false;
            this.SampleGraph = true
            break
        }
      }
    },

    mounted() {
      //关联产品
      crudProductModel.list().then(res => {
        this.products = res;
      });
      this.id = this.$route.params.id;

      crudSpcMain.getSpc(this.id).then(res => {
        console.log(res);
        let picture = res.picture
        this.chart1 = picture.length == 0 ? {} : picture[0]
        this.chart2 = picture.length == 0 ? {} : picture[1]
        this.cp = res.cp;
        this.cpl = res.cpl;
        this.cpu = res.cpu;
        this.cpk = res.cpk;
        this.pp = res.pp;
        this.ppu = res.ppu;
        this.ppl = res.ppl;
        this.ppk = res.ppk;
        this.header = res.header;
        this.tableData = res.data
        this.arrData = {
          data: res.allData,
          name:this.returnArr(res.allData)
        }
        console.log(res.means);
        console.log(this.returnArr(res.means));
        this.means = {
          data:res.means,
          name:this.returnArr(res.means)
        }
        this.percents = {
          data:res.percents,
          name:this.returnArr(res.percents)
        }
      })

    }
  }
</script>

<style scoped>
  span {
    margin-left: 10px;
  }
</style>
